Ajax ব্যবহার করে ফাইল আপলোড করা একটি অত্যন্ত জনপ্রিয় এবং কার্যকর পদ্ধতি, যা পেজ রিফ্রেশ না করেই ফাইল সার্ভারে আপলোড করতে সহায়তা করে। এটি ব্যবহারকারীর অভিজ্ঞতাকে আরও ইন্টারঅ্যাকটিভ এবং দ্রুত করে তোলে। নিচে Ajax ব্যবহার করে ফাইল আপলোড করার প্রক্রিয়া এবং উদাহরণ দেওয়া হলো।
প্রথমে একটি ফাইল আপলোড ফর্ম তৈরি করুন। এই ফর্মে একটি ফাইল ইনপুট এলিমেন্ট থাকবে, যেখানে ব্যবহারকারী ফাইল নির্বাচন করতে পারবেন।
HTML উদাহরণ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>File Upload with Ajax</title>
</head>
<body>
<h1>Upload File using Ajax</h1>
<form id="fileForm" enctype="multipart/form-data">
<label for="file">Choose a file:</label>
<input type="file" id="file" name="file" required>
<button type="button" onclick="uploadFile()">Upload</button>
</form>
<div id="response"></div>
<script src="script.js"></script>
</body>
</html>
Ajax এর মাধ্যমে ফাইল আপলোড করার জন্য JavaScript ফাইল তৈরি করুন, যাতে ফর্ম ডেটা পাঠানোর জন্য XMLHttpRequest এবং FormData ব্যবহার করা হবে।
script.js:
function uploadFile() {
// ফর্ম ডেটা সংগ্রহ
var formData = new FormData(document.getElementById("fileForm"));
// XMLHttpRequest তৈরি
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
// লোড হওয়ার পর রেসপন্স প্রদর্শন করা
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
} else {
document.getElementById("response").innerHTML = "Error: Unable to upload file.";
}
};
// ফাইল আপলোড শুরু
xhr.send(formData);
}
ফাইল গ্রহণ এবং সার্ভারে আপলোড করার জন্য একটি PHP ফাইল তৈরি করুন।
upload.php:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
$uploadedFile = $_FILES['file'];
$uploadDir = "uploads/";
$uploadPath = $uploadDir . basename($uploadedFile['name']);
// ফাইল আপলোড করা
if (move_uploaded_file($uploadedFile['tmp_name'], $uploadPath)) {
echo "File uploaded successfully: " . $uploadedFile['name'];
} else {
echo "Error: File upload failed.";
}
} else {
echo "Error: No file selected or file error.";
}
} else {
echo "Invalid Request.";
}
?>
jQuery ব্যবহার করে Ajax এর মাধ্যমে ফাইল আপলোড আরও সহজ করা যায়।
HTML উদাহরণ (Same as Above)
jQuery Script:
$(document).ready(function () {
$("#fileForm").on("submit", function (e) {
e.preventDefault(); // ফর্মের ডিফল্ট সাবমিশন বন্ধ করা
var formData = new FormData(this);
$.ajax({
url: "upload.php",
type: "POST",
data: formData,
contentType: false, // কন্টেন্ট টাইপ অ্যাডজাস্ট করা হচ্ছে না
processData: false, // jQuery অটোমেটিকালি ডেটা প্রসেস করবে না
success: function (response) {
$("#response").html(response);
},
error: function () {
$("#response").html("Error: Unable to upload file.");
}
});
});
});
ফাইল আপলোড করার সময় ফাইলের সাইজ এবং টাইপ চেক করা একটি গুরুত্বপূর্ণ বিষয়, যাতে সঠিক ফাইল টাইপ এবং সাইজ আপলোড হয়।
PHP ফাইল আপলোডের সাইজ এবং টাইপ চেকিং:
<?php
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
if (isset($_FILES['file']) && $_FILES['file']['error'] == 0) {
$uploadedFile = $_FILES['file'];
$allowedTypes = ['image/jpeg', 'image/png', 'application/pdf']; // অনুমোদিত ফাইল টাইপ
$maxSize = 5 * 1024 * 1024; // 5MB
if (!in_array($uploadedFile['type'], $allowedTypes)) {
echo "Error: Invalid file type. Only JPG, PNG, and PDF are allowed.";
} elseif ($uploadedFile['size'] > $maxSize) {
echo "Error: File size exceeds the limit of 5MB.";
} else {
$uploadDir = "uploads/";
$uploadPath = $uploadDir . basename($uploadedFile['name']);
if (move_uploaded_file($uploadedFile['tmp_name'], $uploadPath)) {
echo "File uploaded successfully: " . $uploadedFile['name'];
} else {
echo "Error: File upload failed.";
}
}
} else {
echo "Error: No file selected or file error.";
}
} else {
echo "Invalid Request.";
}
?>
আপনি আপলোড প্রক্রিয়া পর্যবেক্ষণ করার জন্য XMLHttpRequest এর onprogress ইভেন্ট ব্যবহার করতে পারেন। এটি ব্যবহারকারীকে আপলোডের প্রক্রিয়া সম্পর্কে তথ্য জানাতে সহায়ক হবে।
JavaScript File Upload Progress Example:
function uploadFile() {
var formData = new FormData(document.getElementById("fileForm"));
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload.php", true);
// Progress bar update
xhr.upload.onprogress = function (e) {
if (e.lengthComputable) {
var percent = (e.loaded / e.total) * 100;
console.log("Upload Progress: " + percent.toFixed(2) + "%");
}
};
xhr.onload = function () {
if (xhr.status === 200) {
document.getElementById("response").innerHTML = xhr.responseText;
} else {
document.getElementById("response").innerHTML = "Error: Unable to upload file.";
}
};
xhr.send(formData);
}
Ajax এবং PHP এর মাধ্যমে ফাইল আপলোড করা একটি শক্তিশালী পদ্ধতি যা ব্যবহারকারীদের দ্রুত এবং পেজ রিফ্রেশ ছাড়াই ফাইল আপলোডের সুবিধা প্রদান করে। এটি ব্যবহারকারীর অভিজ্ঞতা উন্নত করে এবং সার্ভার সাইডে ফাইল প্রসেসিং সহজ করে তোলে।
Ajax এবং HTML5 ব্যবহার করে ফাইল আপলোড একটি আধুনিক পদ্ধতি, যা ব্যবহারকারীদের পেজ রিফ্রেশ ছাড়াই ফাইল আপলোড করতে এবং রিয়েল-টাইমে প্রগ্রেস বার বা মেসেজ দেখাতে সক্ষম করে। HTML5 এর FormData অবজেক্ট এবং Ajax এর XMLHttpRequest ব্যবহার করে সহজেই ফাইল আপলোড করা যায়। নিচে একটি উদাহরণসহ ফাইল আপলোডের প্রক্রিয়া ব্যাখ্যা করা হলো।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Ajax File Upload Example</title>
</head>
<body>
<h1>Upload a File</h1>
<form id="uploadForm">
<label for="file">Choose file:</label>
<input type="file" id="file" name="file" required>
<br><br>
<button type="button" onclick="uploadFile()">Upload</button>
</form>
<div id="progress-container" style="display: none;">
<p>Uploading...</p>
<progress id="progressBar" value="0" max="100"></progress>
</div>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function uploadFile() {
var fileInput = document.getElementById('file');
var file = fileInput.files[0];
if (!file) {
document.getElementById("response-container").innerHTML = "Please select a file to upload.";
return;
}
// FormData অবজেক্ট তৈরি করা এবং ফাইল অ্যাড করা
var formData = new FormData();
formData.append("file", file);
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "upload_file.php", true);
// প্রগ্রেস ইভেন্ট হ্যান্ডল করা
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById("progressBar").value = percentComplete;
document.getElementById("progress-container").style.display = "block";
}
};
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("response-container").innerHTML = xhr.responseText;
} else {
document.getElementById("response-container").innerHTML = "Error uploading file.";
}
document.getElementById("progress-container").style.display = "none";
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send(formData);
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<input type="file">) এবং একটি আপলোড বোতাম (<button>) রয়েছে। "Upload" বোতামে ক্লিক করলে uploadFile() ফাংশন কল হবে।<progress>) ব্যবহার করা হয়েছে।response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে আপলোড রেসপন্স বা ত্রুটি মেসেজ দেখানো হবে।<?php
// চেক করা হচ্ছে যে ফাইল আপলোড করা হয়েছে কিনা
if (isset($_FILES['file'])) {
$file = $_FILES['file'];
// ফাইলের নাম এবং টেম্পোরারি লোকেশন পাওয়া
$fileName = $file['name'];
$fileTmpName = $file['tmp_name'];
$uploadDir = 'uploads/';
$uploadPath = $uploadDir . basename($fileName);
// আপলোড ডিরেক্টরি চেক এবং তৈরি করা (যদি না থাকে)
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
// ফাইল মুভ করার চেষ্টা করা
if (move_uploaded_file($fileTmpName, $uploadPath)) {
echo "File uploaded successfully: " . $fileName;
} else {
http_response_code(500); // Internal Server Error
echo "Error uploading the file.";
}
} else {
http_response_code(400); // Bad Request
echo "No file was uploaded.";
}
?>
বিস্তারিত ব্যাখ্যা:
$_FILES এর মাধ্যমে আপলোড করা হয়েছে কিনা।uploads/ নামে একটি ডিরেক্টরি চেক করা হয়েছে এবং সেটি না থাকলে তৈরি করা হয়েছে।move_uploaded_file() ফাংশন দিয়ে ফাইলটি টেম্পোরারি লোকেশন থেকে আপলোড ডিরেক্টরিতে মুভ করা হয়েছে।500 সেট করা হয়েছে।JavaScript এবং HTML5:
uploadFile() ফাংশন কল হয়।FormData অবজেক্ট তৈরি করে ফর্ম ডেটা সংগ্রহ করা হয় এবং তা XMLHttpRequest এর মাধ্যমে সার্ভারে পাঠানো হয়।PHP স্ক্রিপ্ট:
Progress Bar:
xhr.upload.onprogress ইভেন্ট হ্যান্ডলার ব্যবহার করে ফাইল আপলোডের প্রগ্রেস দেখানো হয়েছে।FormData এবং XMLHttpRequest ব্যবহার করে ফাইল আপলোড করা হয়েছে।এই উদাহরণটি অনুসরণ করে Ajax এবং HTML5 ব্যবহার করে ফাইল আপলোডের প্রক্রিয়াটি বোঝা যায় এবং এটি ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে প্রয়োজনীয় একটি দক্ষতা।
Ajax এ FormData অবজেক্ট ব্যবহার করে HTML ফর্ম ডেটা পাঠানো একটি আধুনিক এবং সহজ পদ্ধতি, যা ফর্ম ডেটা সংগ্রহ এবং প্রক্রিয়াকরণের কাজকে অনেক সহজ করে তোলে। এটি XMLHttpRequest এর মাধ্যমে ফর্ম ডেটা অ্যাসিনক্রোনাসভাবে (পেজ রিফ্রেশ ছাড়াই) সার্ভারে পাঠাতে ব্যবহৃত হয়। HTML5 এবং JavaScript এ FormData অবজেক্ট ব্যবহার করে ফাইল সহ বিভিন্ন ধরনের ইনপুট ডেটা সহজেই সার্ভারে পাঠানো যায়।
FormData অবজেক্ট কি?FormData একটি জাভাস্ক্রিপ্ট অবজেক্ট, যা HTML ফর্মের ইনপুট ভ্যালুগুলো সংগ্রহ করে এবং একটি কী-ভ্যালু পেয়ার হিসাবে সংরক্ষণ করে। এটি ইনপুট টাইপের পার্থক্য না করে (যেমন টেক্সট ইনপুট, ফাইল ইনপুট) সব ধরনের ডেটা সহজেই সংগ্রহ এবং প্রক্রিয়া করতে পারে।
FormData অবজেক্টের সুবিধা:FormData অবজেক্ট ব্যবহার করে ফাইল ডেটা সার্ভারে পাঠানো যায়।XMLHttpRequest বা fetch()) এর মাধ্যমে FormData খুব সহজেই পাঠানো যায়।FormData ব্যবহার করে ফর্ম ডেটা সাবমিট করা<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>FormData Example</title>
</head>
<body>
<h1>Employee Registration Form</h1>
<form id="employeeForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="department">Department:</label>
<input type="text" id="department" name="department" required>
<br><br>
<button type="button" onclick="submitForm()">Submit</button>
</form>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function submitForm() {
// ফর্ম এলিমেন্ট সংগ্রহ করা
var form = document.getElementById('employeeForm');
// FormData অবজেক্ট তৈরি করা
var formData = new FormData(form);
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "submit_form.php", true);
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("response-container").innerHTML = xhr.responseText;
} else {
document.getElementById("response-container").innerHTML = "Error submitting the form!";
}
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send(formData);
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<form>) তৈরি করা হয়েছে যেখানে নাম, ইমেইল, এবং ডিপার্টমেন্ট ইনপুট ফিল্ড রয়েছে।submitForm() ফাংশন কল হয়, যা FormData অবজেক্ট তৈরি করে এবং Ajax এর মাধ্যমে ফর্ম ডেটা সার্ভারে পাঠায়।response-container নামে একটি <div> এলিমেন্ট রয়েছে, যেখানে PHP স্ক্রিপ্ট থেকে প্রাপ্ত রেসপন্স বা ত্রুটি মেসেজ দেখানো হবে।<?php
// ফর্ম থেকে ডেটা সংগ্রহ করা
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$department = trim($_POST['department']);
// ভ্যালিডেশন চেক করা
if (empty($name) || empty($email) || empty($department)) {
echo "All fields are required.";
exit();
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
echo "Invalid email format.";
exit();
}
// ডাটাবেস কানেকশন সেটআপ (আপনার তথ্য অনুযায়ী পরিবর্তন করুন)
$servername = "localhost";
$username = "root";
$password = "";
$dbname = "test_db";
$conn = new mysqli($servername, $username, $password, $dbname);
// কানেকশন চেক করা
if ($conn->connect_error) {
echo "Database connection error. Please try again later.";
exit();
}
// SQL কুয়েরি তৈরি করা
$stmt = $conn->prepare("INSERT INTO employees (name, email, department) VALUES (?, ?, ?)");
$stmt->bind_param("sss", $name, $email, $department);
if ($stmt->execute()) {
echo "Employee data submitted successfully!";
} else {
echo "Error submitting data. Please try again.";
}
// কানেকশন এবং স্টেটমেন্ট বন্ধ করা
$stmt->close();
$conn->close();
?>
বিস্তারিত ব্যাখ্যা:
$_POST ব্যবহার করে ফর্ম ডেটা সংগ্রহ করছে এবং ভ্যালিডেট করছে।FormData অবজেক্টের ব্যবহার:new FormData(form):FormData অবজেক্ট তৈরি করা হয়েছে এবং ফর্মের সমস্ত ইনপুট ভ্যালু সংগ্রহ করা হয়েছে।name অ্যাট্রিবিউট) এবং মান (value) সংগ্রহ করে।xhr.send(formData) দিয়ে FormData অবজেক্ট সরাসরি সার্ভারে পাঠানো হয়েছে।FormData এর সুবিধা:FormData অবজেক্টের মাধ্যমে সহজেই ফাইল আপলোড করা যায়, যা Ajax এর মাধ্যমে সম্ভব।FormData অবজেক্ট স্বয়ংক্রিয়ভাবে সেগুলো সংগ্রহ করে এবং পাঠাতে পারে।FormData অবজেক্ট Ajax এর সাথে ব্যবহার করা হয়েছে, যা ফর্ম ডেটা পেজ রিফ্রেশ ছাড়াই সার্ভারে পাঠাতে সাহায্য করে।FormData ব্যবহার করলে ইনপুট ফিল্ডের ডেটা সংগ্রহ এবং প্রক্রিয়াকরণ খুবই সহজ এবং কার্যকর হয়।এই উদাহরণটি অনুসরণ করে FormData এবং Ajax ব্যবহার করে ফর্ম ডেটা প্রক্রিয়াকরণ সম্পর্কে একটি পরিষ্কার ধারণা পাওয়া যায়, যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি গুরুত্বপূর্ণ দক্ষতা।
Ajax এবং HTML5 ব্যবহার করে Multiple File Upload এবং Progress Bar তৈরি করা একটি অত্যন্ত কার্যকর পদ্ধতি, যা ব্যবহারকারীদের পেজ রিফ্রেশ ছাড়াই একাধিক ফাইল আপলোড করার সুযোগ দেয়। Ajax এর মাধ্যমে ফাইল আপলোড করার সময় প্রগ্রেস বার ব্যবহার করা হয়, যা আপলোডের স্ট্যাটাস রিয়েল-টাইমে প্রদর্শন করে। নিচে একটি উদাহরণসহ Ajax এর মাধ্যমে Multiple File Upload এবং Progress Bar কিভাবে কাজ করে তা আলোচনা করা হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Multiple File Upload with Progress Bar</title>
</head>
<body>
<h1>Upload Multiple Files</h1>
<form id="uploadForm">
<label for="files">Choose files:</label>
<input type="file" id="files" name="files[]" multiple required>
<br><br>
<button type="button" onclick="uploadFiles()">Upload</button>
</form>
<div id="progress-container" style="display: none;">
<p>Uploading...</p>
<progress id="progressBar" value="0" max="100"></progress>
</div>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function uploadFiles() {
var filesInput = document.getElementById('files');
var files = filesInput.files;
if (files.length === 0) {
document.getElementById("response-container").innerHTML = "Please select at least one file to upload.";
return;
}
// FormData অবজেক্ট তৈরি করা এবং ফাইলগুলো অ্যাড করা
var formData = new FormData();
for (var i = 0; i < files.length; i++) {
formData.append("files[]", files[i]);
}
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "upload_multiple_files.php", true);
// প্রগ্রেস ইভেন্ট হ্যান্ডল করা
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById("progressBar").value = percentComplete;
document.getElementById("progress-container").style.display = "block";
}
};
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("response-container").innerHTML = xhr.responseText;
} else {
document.getElementById("response-container").innerHTML = "Error uploading files.";
}
document.getElementById("progress-container").style.display = "none";
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send(formData);
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<input type="file">) এবং একটি আপলোড বোতাম (<button>) রয়েছে। এখানে multiple অ্যাট্রিবিউট ব্যবহার করে ব্যবহারকারীকে একাধিক ফাইল সিলেক্ট করার অনুমতি দেওয়া হয়েছে।uploadFiles() ফাংশন কল হবে, যা FormData অবজেক্ট তৈরি করে এবং Ajax এর মাধ্যমে ফাইলগুলো সার্ভারে পাঠাবে।<progress>) ব্যবহার করা হয়েছে। এটি আপলোড প্রগ্রেস রিয়েল-টাইমে দেখায়।<?php
// চেক করা হচ্ছে যে ফাইল আপলোড করা হয়েছে কিনা
if (isset($_FILES['files'])) {
$files = $_FILES['files'];
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
$responses = [];
for ($i = 0; $i < count($files['name']); $i++) {
$fileName = $files['name'][$i];
$fileTmpName = $files['tmp_name'][$i];
$uploadPath = $uploadDir . basename($fileName);
// ফাইল মুভ করার চেষ্টা করা
if (move_uploaded_file($fileTmpName, $uploadPath)) {
$responses[] = "File uploaded successfully: " . $fileName;
} else {
$responses[] = "Error uploading file: " . $fileName;
}
}
// রেসপন্স তৈরি করা
echo implode("<br>", $responses);
} else {
http_response_code(400); // Bad Request
echo "No files were uploaded.";
}
?>
বিস্তারিত ব্যাখ্যা:
$_FILES এর মাধ্যমে আপলোড করা হয়েছে কিনা।uploads/ নামে একটি ডিরেক্টরি চেক করা হয়েছে এবং সেটি না থাকলে তৈরি করা হয়েছে।for লুপ ব্যবহার করে প্রতিটি ফাইলের টেম্পোরারি লোকেশন থেকে আপলোড ডিরেক্টরিতে মুভ করা হয়েছে।$responses) তে সংরক্ষণ করা হয়েছে এবং শেষে তা আউটপুট করা হয়েছে।JavaScript এবং HTML5:
uploadFiles() ফাংশন কল হয়।FormData অবজেক্ট ব্যবহার করে ফাইলগুলো অ্যাড করা হয় এবং তা XMLHttpRequest এর মাধ্যমে সার্ভারে পাঠানো হয়।PHP স্ক্রিপ্ট:
Progress Bar:
xhr.upload.onprogress ইভেন্ট হ্যান্ডলার ব্যবহার করে ফাইল আপলোডের প্রগ্রেস দেখানো হয়েছে।FormData এবং XMLHttpRequest ব্যবহার করে একাধিক ফাইল আপলোড করা হয়েছে।এই উদাহরণটি অনুসরণ করে Ajax এবং HTML5 ব্যবহার করে Multiple File Upload এবং Progress Bar কিভাবে কাজ করে তা বোঝা যায়। এটি একটি অত্যন্ত গুরুত্বপূর্ণ দক্ষতা, যা ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে প্রয়োজনীয়।
Ajax ব্যবহার করে একটি Job Application Form তৈরি করা যেখানে ব্যবহারকারী তার CV/Resume আপলোড করতে পারে, এটি একটি সাধারণ কিন্তু অত্যন্ত কার্যকর পদ্ধতি। এই উদাহরণে, HTML5 এর FormData এবং Ajax এর XMLHttpRequest ব্যবহার করে ব্যবহারকারীর CV আপলোড করা হয়েছে এবং প্রগ্রেস বার ব্যবহার করে আপলোডের প্রগ্রেস দেখানো হয়েছে।
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Job Application Form</title>
</head>
<body>
<h1>Job Application Form</h1>
<form id="applicationForm">
<label for="name">Name:</label>
<input type="text" id="name" name="name" required>
<br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required>
<br><br>
<label for="cv">Upload CV:</label>
<input type="file" id="cv" name="cv" accept=".pdf,.doc,.docx" required>
<br><br>
<button type="button" onclick="submitApplication()">Submit Application</button>
</form>
<div id="progress-container" style="display: none;">
<p>Uploading...</p>
<progress id="progressBar" value="0" max="100"></progress>
</div>
<div id="response-container">
<!-- রেসপন্স বা ত্রুটি মেসেজ এখানে দেখানো হবে -->
</div>
<script>
function submitApplication() {
var form = document.getElementById('applicationForm');
var formData = new FormData(form);
// XMLHttpRequest অবজেক্ট তৈরি করা
var xhr = new XMLHttpRequest();
// POST রিকোয়েস্ট ওপেন করা
xhr.open("POST", "upload_cv.php", true);
// প্রগ্রেস ইভেন্ট হ্যান্ডল করা
xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
var percentComplete = (event.loaded / event.total) * 100;
document.getElementById("progressBar").value = percentComplete;
document.getElementById("progress-container").style.display = "block";
}
};
// রেসপন্স হ্যান্ডলিং সেট করা
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
document.getElementById("response-container").innerHTML = xhr.responseText;
} else {
document.getElementById("response-container").innerHTML = "Error submitting the application.";
}
document.getElementById("progress-container").style.display = "none";
}
};
// ত্রুটি হ্যান্ডলিংয়ের জন্য onerror ইভেন্ট হ্যান্ডলার সেট করা
xhr.onerror = function() {
document.getElementById("response-container").innerHTML = "Network error occurred. Please try again.";
};
// রিকোয়েস্ট পাঠানো
xhr.send(formData);
}
</script>
</body>
</html>
বিস্তারিত ব্যাখ্যা:
<form>) তৈরি করা হয়েছে যেখানে নাম, ইমেইল, এবং CV (ফাইল) আপলোড করার জন্য ইনপুট ফিল্ড রয়েছে।submitApplication() ফাংশন কল হবে, যা FormData অবজেক্ট তৈরি করে এবং Ajax এর মাধ্যমে ফর্ম ডেটা সার্ভারে পাঠাবে।<progress>) ব্যবহার করা হয়েছে।<?php
// ফর্ম থেকে ডেটা সংগ্রহ করা
$name = trim($_POST['name']);
$email = trim($_POST['email']);
$cv = $_FILES['cv'];
// ভ্যালিডেশন চেক করা
if (empty($name) || empty($email)) {
http_response_code(400); // Bad Request
echo "Name and email are required.";
exit();
}
if (!filter_var($email, FILTER_VALIDATE_EMAIL)) {
http_response_code(400); // Bad Request
echo "Invalid email format.";
exit();
}
// ফাইল চেক করা
if ($cv['error'] !== UPLOAD_ERR_OK) {
http_response_code(400); // Bad Request
echo "Error uploading the CV.";
exit();
}
// অনুমোদিত ফাইল টাইপ চেক করা
$allowedTypes = ['application/pdf', 'application/msword', 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'];
if (!in_array($cv['type'], $allowedTypes)) {
http_response_code(400); // Bad Request
echo "Only PDF, DOC, and DOCX files are allowed.";
exit();
}
// আপলোড ডিরেক্টরি তৈরি করা (যদি না থাকে)
$uploadDir = 'uploads/';
if (!is_dir($uploadDir)) {
mkdir($uploadDir, 0777, true);
}
// ফাইলের নাম সেট করা
$uploadPath = $uploadDir . basename($cv['name']);
// ফাইল মুভ করার চেষ্টা করা
if (move_uploaded_file($cv['tmp_name'], $uploadPath)) {
echo "Application submitted successfully! Your CV has been uploaded.";
} else {
http_response_code(500); // Internal Server Error
echo "Error saving the CV. Please try again later.";
}
?>
বিস্তারিত ব্যাখ্যা:
uploads/ ডিরেক্টরি তৈরি করা হয় এবং ফাইল আপলোড পাথ সেট করা হয়।move_uploaded_file() ফাংশন দিয়ে ফাইল আপলোড ডিরেক্টরিতে সংরক্ষণ করা হয়। সফল হলে একটি সফল মেসেজ রিটার্ন করা হয়, অন্যথায় একটি ত্রুটি মেসেজ দেওয়া হয়।JavaScript এবং HTML5:
submitApplication() ফাংশন কল হয়।FormData অবজেক্ট তৈরি করে ফাইল এবং ইনপুট ডেটা সংগ্রহ করা হয় এবং তা Ajax এর মাধ্যমে সার্ভারে পাঠানো হয়।PHP স্ক্রিপ্ট:
Progress Bar:
xhr.upload.onprogress ইভেন্ট হ্যান্ডলার ব্যবহার করে ফাইল আপলোডের প্রগ্রেস দেখানো হয়েছে।FormData এবং XMLHttpRequest ব্যবহার করে CV আপলোড করা হয়েছে।এই উদাহরণটি অনুসরণ করে আপনি Ajax এবং HTML5 ব্যবহার করে Job Application Form এর মাধ্যমে ফাইল আপলোড করতে পারবেন, যা আপনার ওয়েব অ্যাপ্লিকেশন ডেভেলপমেন্টে একটি কার্যকর উপায়।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
